<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import axios from 'axios';
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUrlStore } from '@/stores/url';
const UrlStore = useUrlStore()

const router = useRouter()
const managerName = ref('')
//用户名1：小马  密码1：123456
//用户名2：小空多尼  密码2：123456
const password = ref('')
const errorAlert =ref(null)
const errorMessage = ref('')
const errorOpacity = ref(0)

const loginService = ()=>{
  if(managerName.value.trim() === ''){
      //请填写用户名！
      errorOpacity.value = 1
      errorMessage.value = '请填写用户名！'
      setTimeout(()=>errorOpacity.value = 0,3000)
      return
    }
    if(password.value.trim() === ''){
      //请填写密码！
      errorOpacity.value = 1
      errorMessage.value = '请填写密码！'
      setTimeout(()=>errorOpacity.value = 0,3000)
      return
    }

  const formData = new window.FormData();
  formData.append("managerName",managerName.value)
  formData.append("password",password.value)
  axios({
  url:'http://175.178.62.164:61803/manager/login',
  method:'post',
  data:formData,
}).then(result=>{
  if(result.data.code === 0){
    UrlStore.managerName = managerName
    router.push('/layout')
  }else{
      errorOpacity.value = 1
      errorMessage.value = '用户名或密码错误！'
      setTimeout(()=>errorOpacity.value = 0,3000)
      return
  }
}).catch(err=>{
  console.dir(err);
})
}
</script>

<template>
  
    <el-row class="login-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <el-form ref="form" size="large" autocomplete="off">

        <el-alert type="error" :title=errorMessage :closable=false ref="errorAlert" :style="{ opacity: errorOpacity }" class="el-alert" />

        <el-form-item>
          <h1>登录</h1>
        </el-form-item>
        <el-form-item>
          <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="managerName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
          v-model="password"
            name="password"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
            :show-password="true"
            @keyup.enter="loginService"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="button" type="primary" auto-insert-space
            @click="loginService">登录</el-button
          >
        </el-form-item>
        <el-form-item class="flex">
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<style scoped>
.el-alert {
  margin: 20px 0 0;
}
.el-alert:first-child {
  margin: 0;
}


.box{
  width: 10vw;
  height: 10vh;
  background-color: pink;
}

.login-page {
  height: 100vh;
  background-color: #fff;
}

.bg {
    background: 
    url('../assets/achobeta2.png') no-repeat 50% center / 300px auto,
      url('../assets/dgut2.jpg') no-repeat center / cover;
    border-radius: 0 20px 20px 0;
  }

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;
  }
    .title {
      margin: 0 auto;
    }
    .button {
      width: 100%;
    }
    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
</style>